<template>
    <div class="panel minh_624">
        <div class="item_title pr">
            账号绑定
            <p class="tools-box" style="color: #999;font-size: 14px;font-weight: 400;">
                绑定您的常用手机、邮箱，时刻掌握交易动态提醒、短信验证支付等，保护您的账户、资金安全
            </p>
        </div>
        <div class="padding_16">
            <div class="bindInfo">
                <div class="ac_content__item clearfix">
                    <p class="fl">
                        <span class="ac_list__title">手机号码：</span>
                        <span class="ac_list__status">{{infoData.u_phone}}</span>
                    </p>
                    <!-- <el-button class="ac_list__btn fr" type="primary" @click="teldialog = true;">变更</el-button> -->
                </div>
                <div class="ac_content__item clearfix">
                    <p class="fl">
                        <span class="ac_list__title">电子邮箱：</span>
                        <span class="ac_list__status">{{infoData.u_email}}</span>
                    </p>
                    <el-button class="ac_list__btn fr" type="primary" @click="emaildialog = true;">变更</el-button>
                </div>
            </div>
        </div>
        <!-- 变更手机号 -->
        <el-dialog title="变更手机号" :visible.sync="teldialog" width="450px">
            <el-form :model="form" ref="form">
                <el-form-item>
                    <el-input placeholder="请输入手机号" v-model="form.u_account" autocomplete="off"></el-input>
                </el-form-item>
            
                <div class="clearfix">
                    <div class="fl">
                        <el-form-item>
                            <el-input v-model="form.code" placeholder="请输入短信验证码" style="width: 280px;"></el-input>
                        </el-form-item>
                    </div>
                    <el-button type="primary" class="fr" :disabled="countdown" @click="getmcode(1)" style="height: 40px;">获取验证码</el-button>
                </div>
                
                <div class="dialog-footer text-center">
                    <el-button type="primary" @click="Onsubmit('form',1)">确 定</el-button>
                    <el-button @click="teldialog = false">取 消</el-button>
                </div>
            </el-form>
        </el-dialog>
        <!-- 变更邮箱 -->
        <el-dialog title="变更邮箱" :visible.sync="emaildialog" width="450px">
            <el-form :model="form" ref="form">
                <el-form-item>
                    <el-input placeholder="请输入邮箱" v-model="form.u_account" autocomplete="off"></el-input>
                </el-form-item>
            
                <div class="clearfix">
                    <div class="fl">
                        <el-form-item>
                            <el-input v-model="form.code" placeholder="请输入邮箱验证码" style="width: 280px;"></el-input>
                        </el-form-item>
                    </div>
                    <el-button type="primary" class="fr" :disabled="countdown" @click="getmcode(2)" style="height: 40px;">{{getcodeTxt}}</el-button>
                </div>
                
                <div class="dialog-footer text-center">
                    <el-button type="primary" @click="Onsubmit('form',2)">确 定</el-button>
                    <el-button @click="emaildialog = false">取 消</el-button>
                </div>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>

    export default {
        data(){
            return{
                infoData: {},
                form: {
                    'u_account': '',
                    'code': '',
                },
                teldialog: false,  //手机
                emaildialog: false,  //邮箱
                name: '',
                countdown: false,  //60s倒计时  按钮不可点击
                getcodeTxt: '获取验证码',  //
            }
        },
        methods: {
            init(){

                var _this = this;

                this.$httpGet('/api/index/Personal_center/enterpriseInfo',{
                    'u_id': window.localStorage.uid,
                }).then(response => {
                    
                    if(response.code == 200){

                        _this.infoData = response.msg;
                        
                    }else{
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        });
                    }

                });
            },
            //获取验证码  手机号 1、邮箱 2
            getmcode(type){
                var _this = this;
                
                if(type == 1){

                    if(!_this.form.u_account){
                        this.$message({
                            message: '请先输入手机号',
                            type: 'info'
                        });
                        return;
                    }

                }else if(type == 2){

                    if(!_this.form.u_account){
                        this.$message({
                            message: '请先输入邮箱地址',
                            type: 'info'
                        });
                        return;
                    }

                    this.$httpGet('/api/index/mail/email',{
                        'u_email': _this.form.u_account,
                        'type': 1,
                    }).then(response => {
                    
                        if(response.code == 200){
                            this.$message({
                                message: response.msg,
                                type: 'success'
                            });
                        }else{
                            this.$message({
                                message: response.msg,
                                type: 'warning'
                            });
                        }

                    });
                }
                this.countdownFun();
            },
            //提交  变更手机号 1、邮箱 2
            Onsubmit(formName,type){
                var _this = this;

                
                if(!_this.form.u_account){
                    if(type == 1){
                        this.$message({
                            message: '请输入手机号',
                            type: 'warning'
                        });
                    }else if(type == 2){
                        this.$message({
                            message: '请输入邮箱',
                            type: 'warning'
                        });
                    }
                    return
                }

                if(!_this.form.code){

                    this.$message({
                        message: '请输入验证码',
                        type: 'warning'
                    });
                    return
                }
                
                //校验验证码是否正确
                this.$httpGet('/api/index/Personal_center/verificationEmailCode',{
                    'u_email': _this.form.u_account,
                    'u_email_code': _this.form.code,
                }).then(response => {
                    
                    if(response.code == 200){
                        //变更
                        let data = {};
                        data.u_id = window.localStorage.uid;
                        data.u_new_account = _this.form.u_account;
                        data.u_type = type;

                        if(type == 1){  //手机号
                            data.u_account = _this.infoData.u_phone;
                        }else if(type == 2){  //邮箱
                            data.u_account = _this.infoData.u_email;
                        }
                        this.$httpGet('/api/index/Personal_center/updatePhoneOrEmail',data).then(response => {
                            
                            if(response.code == 200){

                                this.$message({
                                    message: response.msg,
                                    type: 'success'
                                });
                                _this.teldialog = false;  //手机
                                _this.emaildialog = false;  //邮箱
                                _this.form.u_account = '';
                                _this.form.code = '';
                                _this.init();
                                
                            }else{
                                this.$message({
                                    message: response.msg,
                                    type: 'warning'
                                });
                            }

                        });
                    }else{
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        });
                    }

                });
                
            },
            //验证码  60s   倒计时
            countdownFun(){
                var _this = this;
                let time = 60;
                _this.getcodeTxt = time + 's后重试';
                _this.countdown = true;
                let interval = setInterval(() => {
                    if(time > 0){
                        time --;
                        _this.getcodeTxt = time + 's后重试';
                    }else{
                        clearInterval(interval);
                        _this.countdown = false;
                        _this.getcodeTxt = '获取验证码';
                    }
                }, 1000);
            },
        },
        mounted(){
            this.init();
        },
    }
</script>
